<template>
  <div class="top" style="display: flex;align-items: center;">
    <p class="left" style="width: 8px;height: 25px;background-color: #f6d39c;margin-right: 10px;border-radius: 3px;"></p>
    <p style="color: white;font-size: 22px;font-weight: 600;">{{ $t('入金记录') }} </p>
  </div>

  <!--  <div class="box1" style="margin-top:20px">
         
      </div> -->
  <div class="box2" style="margin-top: 20px;">
    <div class="inner inner1">
      <span>{{ $t('订单状态') }}</span>
      <el-select v-model="form.status" class="m-2" :placeholder="$t('全部')" style="width: 120px;height:32px"
        @change="handleSelectChange">
        <el-option v-for="item in status" :key="item.name" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <div class="inner inner2">
      <span>{{ $t('订单编号') }}</span>
      <el-input v-model="form.order_sn" :placeholder="$t('订单编号')" />
    </div>
    <div class="inner inner1">
      <span>{{ $t('日期类型') }}</span>
      <el-select v-model="form.time_type" class="m-2" :placeholder="$t('申请日期')" style="width: 120px;height:32px"
        @change="handleSelectChange">
        <el-option v-for="item in date" :key="item.value" :label="item.label" :value="item.time_type" />
      </el-select>
    </div>
    <div class="inner inner3">
      <span>{{ $t('开始日期') }}</span>
      <div class="block">
        <el-date-picker v-model="form.start_time" type="date" value-format="YYYY-MM-DD" />
      </div>
    </div>
    <div class="inner inner4">
      <span>{{ $t('结束日期') }}</span>
      <div class="block">
        <el-date-picker v-model="form.end_time" type="date" value-format="YYYY-MM-DD" />
      </div>
    </div>
    <div class="inner inner5">
      <div style="
          height: 33px;
          border-radius: 5px;
          background-color: #f6d39c;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          margin-right: 10px;
          display: inline-block;
           padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            box-sizing: border-box;
        " @click="select">
        <el-icon style="font-size: 16px; margin-right: 5px">
          <Search />
        </el-icon>
        <span>{{ $t('查询') }}</span>
      </div>
    </div>
  </div>

  <div class="box3" style="background-color: #2d303d;">
    <el-table :data="listData" width="90%"
      style="font-size: 14px; margin-top: 20px; overflow-x: auto;background-color: #2d303d;"
      :header-cell-style="{ background: '#2d303d', height: '30px' }" :header-style="{ background: '#2d303d' }">
      <el-table-column prop="order_sn" :label="$t('订单号')"  min-width="250" fixed sortable />
      <el-table-column prop="money" :label="$t('申请金额')"  min-width="100" sortable />
      <el-table-column prop="pay_money" :label="$t('实际到账金额')"  min-width="150" sortable />
      <el-table-column prop="channel_value" :label="$t('通道名称')"  min-width="100" sortable />
      <el-table-column prop="status_str" :label="$t('状态')"  min-width="100" sortable />
      <el-table-column prop="time_str" :label="$t('申请时间')"  min-width="150" sortable />
      <el-table-column prop="pay_time_str" :label="$t('入金时间')"  min-width="150" sortable />
      <el-table-column prop="admin_msg" :label="$t('备注')"  min-width="100" sortable />
    </el-table>
  </div>
  <div class="total" style="width: 100%;height: 40px;color: white; display: flex;align-items: center;">
    <span style="margin-left: 10px;">{{ $t('统计') }}</span>
    <span style="margin-left: 570px;">{{ $t('总金额') }}：{{ total }}</span>
  </div>
  <div class="block" style="margin-top: 20px;">
      <el-pagination v-model:current-page="form.page" background layout="prev, pager, next" :total="pageTotal" :default-page-size="15" @current-change="handlePageChange"/>
    </div>
</template>
    
<script>
import {
  rechargeApi,
  getstatusApi
} from '@/api/index'
export default {
  name: 'DashBoard',
  data() {
    return {
      pageTotal:"",
      total: '',
      listData: [],
      form: {
        token: '',
        page: '1',
        time_type: '1',
        start_time: '',
        end_time: '',
        status:'',
        order_sn:''
      },
      status:[],
      date: [
        {
          value: this.$t('申请日期'),
          label: this.$t('申请日期'),
          time_type: '1'
        },
        {
          value:this.$t('入金日期') ,
          label: this.$t('入金日期'),
          time_type: '2'
        }
      ],
    };
  },
  methods: {
    handlePageChange(){
      this.getRecharge()
    },
    getRecharge() {
      const token = localStorage.getItem('token')
      this.form.token = token
      rechargeApi(this.form).then(res => {
        this.pageTotal = res.data.total
        this.listData = res.data.data
        this.total = res.data.sum_money
      })
    },
    // 获取充值提现状态
    getStatus(){
      getstatusApi({type:1}).then(res => {
        this.status = res.data
      })
    },
    handleSelectChange(){

    },
    select(){
      this.getRecharge()
    }
  },
  mounted() {
    this.getRecharge()
    this.getStatus()
  }
}
</script>
    
<style lang="scss" scoped>
:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.4);
  /* lightgray, but transparent */

}

/* 进度条颜色 我需要的是渐变色 */
:deep(.el-progress-bar__inner) {
  background-color: white;
  //background: linear-gradient(90deg, #FEC015 0%, #FE8B25 100%);
}

.box1:hover {
  cursor: pointer
}

.box2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: white;

  :deep(.el-input__wrapper) {
    background-color: black;
    height: 32px;
    box-shadow: none;
    color: white;

  }

  .inner {
    margin-right: 10px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      margin-right: 10px;
    }
  }

  .inner1 {
    :deep(.el-input__wrapper) {
      box-shadow: none;
      color: white;
      background-color: black;
    }
  }

  .inner2 {
    .el-input {
      width: 220px;
    }
  }

  .inner3 {
    align-items: center;
    display: flex;
  }

  .inner4 {
    align-items: center;
    display: flex;


    .demo-date-picker {
      display: flex;
      width: 100%;
      padding: 0;
      flex-wrap: wrap;
    }

    .demo-date-picker .block {
      padding: 30px 0;
      text-align: center;
      border-right: solid 1px var(--el-border-color);
      flex: 1;
    }

    .demo-date-picker .block:last-child {
      border-right: none;
    }

    .demo-date-picker .demonstration {
      display: block;
      color: var(--el-text-color-secondary);
      font-size: 14px;
      margin-bottom: 20px;
    }
  }

  .inner5 {
    color: #303133;
  }
}

.box3 {

  :deep(.el-table.is-scrolling-left th.el-table-fixed-column--left) {
    background-color: #2d303d;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: #2d303d;
  }

  :deep(.el-table td) {
    border-bottom: 3px solid black;
  }

  :deep(.el-table__body-wrapper tr td) {
    background-color: #2d303d;
    color: white;
  }

  :deep(.el-table thead) {
    color: #fff;
  }

  :deep(.el-pagination__total) {
    color: #fff !important;
  }

  :deep(.el-pagination__jump) {
    color: #fff !important;
  }

  :deep(.el-pager li) {
    color: #fff !important;
  }

  :deep(.el-input__inner) {
    color: #fff !important;
  }
}

.custom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //gap: 10px;

  color: white;
}

.topbox {
  width: 100%;
  height: 21px;
  display: flex;
  font-size: 13px;

  // justify-content: space-around;
  .small {
    width: 152px;
    // background-color: pink;
  }

  .small2 {
    width: 152px;
    // background-color: pink;
  }
}

.chart-wrapper {
  width: 100%;
  /* 确保内部图表容器充满el-col */
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  /*   .github-corner {
        position: absolute;
        top: 0px;
        border: 0;
        right: 0;
      } */

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

:deep(.el-input__wrapper) {
  background-color: black ! important;
  box-shadow: none;
}

:deep(.el-pagination__total) {
  color: #fff !important;
}

:deep(.el-pagination__jump) {
  color: #fff !important;
}

:deep(.el-pagination button) {
  background-color: black;
  color: white;
}

:deep(.el-pager li) {
  background-color: black;
  color: white;

}

:deep(.el-input__wrapper) {
  background-color: black;
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #fff;
}
// 分页器
:deep(.el-pagination) {
  .el-pager li {
    background-color: #000;
  }
}
:deep(.el-pagination.is-background .btn-next){
  background-color: #000;
}
:deep(.el-pagination.is-background .btn-prev){
  background-color: #000;
}
:deep(.el-pagination.is-background .el-pager li.is-active){
  background-color: #999;
}
</style>
    